<template>
  <div class="top_bar">
    <!-- left -->
    <div class="left_wrap">
      <van-icon name="wap-nav" shape="round" />
    </div>
    <!-- center -->
    <div class="center_wrap">
      <!-- 我的 发现 云村 视频 -->
      <span>我的</span>
      <span class="active">发现</span>
      <span>云村</span>
      <span>视频</span>
    </div>
    <!-- right -->
    <div class="right_wrap">
      <van-icon name="search" shape="round" />
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  components: {},
};
</script>

<style lang="less" scoped>
.top_bar {
  display: flex;
  background-color: red;
  height: 1rem;
  align-items: center;
  justify-content: space-around;
  font-size: 0.35rem;

  .center_wrap {
    span {
      margin: 0 0.22rem;
      color: #fff;
    }
    .active {
      font-weight: 550;
    }
  }
}
</style>